uofi top screenshot.png
browse-main-screen.png
online-link-no-buttons.png
Frame 1.png
logged-in-phone.png
info-involvement-img.png
in-person-web-register.png
Stay healthy.png
in-person-detail.png
Twitter card.png
Featured.png
uoi tweet snapshot 2.png
BlockI-Logo-Reversed-Orange-RGB.png
samsung_galaxy_s7_flat_temp_white.png

KEEPING STUDENTS IN THE KNOW

The University of -X- is continuously adding the latest news and events for their 50,000+ online & on-campus students onto their iOS and Android mobile app.

UI DESIGN

MOBILE APP

Role

UI Designer working collaboratively with the team's Content Strategist, UX Designer, and external Engineers

DELIVERABLES

High-fidelity wireframes, micro-interaction references, prototypes, and the initial design system creation.

DESIGN SYSTEM

Challenge ONE

To get all the stakeholders on board in creating a living design system.

 

To have the stakeholders understand the need to update the overall look & feel to the latest, already existing styling that their main website is already utilizing.

Have the client recognize all the inconsistencies that are continuously piling up— creating an incohesive product.

Challenge illustration cloud-bubbles.png
screens.png
marked screens
headers.png
colors button styles.png
color mismatch.png

Take Inventory

Understand the current state of the mobile app. Gather all the different assets, colors, type styles, patterns, and reusable components used. Inconsistencies will appear.

buttons1.png
buttons2.png
input.png
type1.png
type2.png

design system

The discussion about developing a complete 'living' design system for the mobile app kept falling into the backlog. The project was continuously delayed due to other higher priorities on other feature demands. Below is what was possible to put together during my in-between times.

After taking inventory, I began to organize and group the findings. I referred to the school's existing 'static' brand & style guidelines and pulled essential information and examples that would apply to the mobile application.

atomic reversed.png

As part of my process, I referred to Brad Frost's Atomic Design method.

static.png
cover.png
cover.png
intro1.png
intro1.png
intro2.png
intro2.png
cover.png
cover.png
message.png
content.png
lettermark.png
combomark.png
min-size-clearance.png
backgrounds.png
color-primary.png
color-supporting.png
typefaces.png
cover.png
cover.png
type-style.png
type-system.png
iconography.png
icon-library.png
images-photography.png
images-background-imgs.png
cover.png
cover.png
app.png
ux.png
agile ext.png

The collaboration begins

In Figma, I created this presentational style document that was to kick off the collaboration process. A place where the findings and essential information provided by the CS, UX, UI, and Engs could be shared and discussed. This was to be the beginning of putting the building blocks of a design system together: Brand & style guide information, pattern libraries, design standards, documentation, principles, toolkit, and more.

Challenge TWO

Working out the process— Collaborating with a new team while working with multiple stakeholders with different goals in mind. Ultimately, the challenging difficulties were within communication, collaboration, and different levels of transparency.

lightbulb.png
Collab Low-Fi.png
Home Hi-Fi.png

Design PROCESS

Listed below is my general process and edited as necessary. 

DISCOVER
Stakeholder

Who

What

Audience | User-base

Needs

Pain points

Competitors

Likes & dislikes of peer sites

Brand

Style

Research

Peer comparison

Current trends

Inspiration | mood boards

Gut test (if applicable)

Define
Synthesize

My findings

UX findings

Look & feel

Design palette

Design takeaways

DESIGN
Ideate

Low-fi work session with UX

Design direction

Screen layouts

Mid-fidelity wireframe

Dot testing | Preference testing

Developer | Engineer discussion

Design palette layout options

Stakeholder review

Design

Hi-fidelity wireframes

Different states

Responsive layouts

Prototype mockup with UX

Collaborate with Dev | Eng

Review

Revise & refine

Internal review

Stakeholder review(s)

BUILD
Develop

Continue collab with Dev | Eng

Build & test

Reiterate | refine

Document

handoff.png
annotation ex.png

design handoff

Clearly marking details and providing essential information within the annotations is crucial. The next step would have been the allowance to work directly with Engineers to improve the information exchanged during handoff to end the constant need to re-invent the wheel in certain areas. Direct collaboration with both sides would have made a world of difference.

Visual references

Showing stakeholders and developers visual examples, whether prototypes or micro-interactions, is essential in presenting concepts on how they help improve and enhance the experience.

(Figma)

(Flinto)

student female
student male
Room for improvement

Communication with stakeholders

Communication with external developers | engineers

Better planning on the process and how the information would be shared and implemented

What went well

Starting a foundation for a design system

Building relationships with the external engineers

What Didn't go well

Overall stakeholders were not aligned with their goals

Approved hi-fi handoff files were changed

Implementing the look & feel according to their already existing, updated style guides

NEXT STEPS

To have all the stakeholders fully agree to commit to the design system

Push for meetings and work sessions directly with the Engineering team to have a clearer understanding of where we are all at and how to share, edit, and update information

Make it into a living design system accessible to all

yellow-box.png
yellow-box.png