Herbalife UX/UI Design
Stakeholder: Herbalife is a nutrition and weight management company that sells its products through independent distributors.
Project Goal: Create a mobile friendly web application that would allow for their independent distributors to keep track on sales, downline and business activities.
Role: UX and UI Design
*Wireframes
*Flows
*Layout
*Prototyping
*Deliverables
Project: I came in at the middle of this project so it was my responsibility to learn fast. I was tasked with creating the wireframes for the desktop site which was quickly scrapped as the stakeholder decided on a mobile site. Switching gears I was tasked with creating cards to hold various content. As the project evolved I took over creating the UX and UI for the Congratulations page.
For the UI Design part of this project I followed the style guides and kept in mind simplicity as well as ease of use. Knowing that less is more when it came to this project it was a goal of mine to not clutter the designs. They needed to feel inviting yet each component needed to be functional.
Taking the lead on the final UX part of the project it was my responsibility to make sure that all necessary components were created and in the component library. As the lead prototyper the goal was to create a native app experience that behaved as the end user would expect. It was important for the user experience to be interactive, engaging and fun.
Challenges: There were two major challenges that were faced during this project.
1. The stakeholder found it challenging to visualize low fidelity wireframes. This was overcome by creating high fidelity wireframes while implementing UI Design.
2. Project direction changed from creating a mobile and desktop site to a native app. Being able to quickly switch gears allowed for the change in direction with minimal design interruption.
Below are screenshots of some UX/UI design screens I was responsible for.
Final Visual Design
_________________________________________________________________________________________
ScifCom
Stakeholder: ScifCom is a data security company that prides itself on the latest encriptive technology.
Project Goal: Create a website that is clean, easy to navigate and lets its end user feel secure.
Role: UI Design
*Iconography
*Page design
Project: I was asked to come up with two different options for icon design that the end user would see when performing certain functions. The other part was to design the blog page using the wireframe as my guide. The rest of the project was handled by the design team assigned to it as I was heavily involved with a different project.
To create custom icons I conducted research to see what kinds of data and security icons already existed. After a few sketches I decided on the two variations to present to the design team.
For the webpage background I researched different blog pages for inspiration. While doing that I got a text message and viola! The chat bubble background came to life.
Iconography
Taking icons and turning them into something new can be a fun challenge. Here are two slightly different variations of the same icons.
Webpage Background
Creating hierarchy in this page was the main goal. Bringing attention to the main article while still having teasers and links to the other content. Keeping in mind the excitement we get from seeing the chat bubble was the inspiration for this background design.
_________________________________________________________________________________________
Find My Stuff
Click the link to explore the Interactive Prototype
Stakeholder: Find My Stuff is a fictitious company that uses GPS to assist in finding misplaced or lost items.
Project Goal: Create a native app to assist end users in tracking where to locate their misplaced or lost items. The app needs to be semi-customizable to where the user may enter their items in a list for them to track.
Role: UX Designer
*User Journey
*Wireframes
*Prototype
*Deliverables
Project: Tasked with creating a native app using UXD and HCD I asked myself the follow questions:
*What would be most useful?
*What will help make peoples lives easier?
*How would the end user interact with the app?
Thinking about how common it is for people to misplace their car keys, eyeglasses, smartphone as well as other things I decided to create an app that would assist people in finding their stuff. Doing extensive research to see what was available on the market I found that tracking your belongings was not as easy as it could be. The thought behind Find My Stuff is that it would use a disposable sticker that would contain a microchip. Each sticker would have a unique tracking number that coincides with the barcode printed on each sticker.
Challenges: Creating a native app that does not yet exist meant that there was no real standards to follow. At the same time it also allowed for full creative freedom.
After doing extensive research to see what is currently available on the market, trackers and apps, the app page wireframes were born. From there a working prototype was created and changes made to give the end user the experience of Finding My Stuff.
Below are the deliverables: documentation standards, user journey, template, annotations and wireframes.
Cover page for deliverables. I like to have a simple and clean cover page free of unnecessary distractions.
Document History:
*Major changes during design
*Helps to see the development of the deign process
Site map shows the user journey starting from the welcome page to the tracking page.
Template Shows:
*Dimension guide
*Placement
An iPhone 8 was used to model the standards.
Annotations:
*Assist the developer with understanding what they are looking at
*Lets them know what areas are repeatable
*Tells the behavior and functionality of each component
It's important to have clear and concise annotations.
Wireframes show a clear view of what to expect.
