L.L.Bean wanted to create their first mobile app which helps to not only increase sales outside of physical stores and current website but also provides useful information about product and inventory for in-store reps to serve customers better.
I was working with another UX designer under supervising of an UX manager on the creative track. Responsibility includes ideation, wireframing, prototype and user testing.
Major user flows were identified by UX manager, based on requirements and business goals. I, as one of the two UX designers, took over portions of app to tackle on. On daily basis, we would regroup to communicate progress and thoughts.
Design system: We were using InDesign for the creation of wires. It is a good tool to use when multiple designers are working together creating wireframe that share a lot of common components.
There are three levels of documents were created in total:
- User flow
An InDesign file was created to only describe user flows with diagrams and empty screen placeholders with no wireframes embeded.
- Individual screens
Seperate InDesign files was created to contain wireframes of individual screens and different instances. Each screen will be embeded into the "User Flow" file created on previous step.
- Common components
A set of files were created to include more granular compoenets, such as status bar, title bar, nav tabs, search bar, text fields, etc.
We embedded common components into the file of "individual screen", and then embedded screens into the file of "user flow".
In that case, we can lower the total number of edits we had to do when we need to change design on a screen, since we didn't have to change it everywhere.
Main steps are listed below.
Requirement gathering: As always, the first thing to do was to work together with BA gathering all available requirements from client.
Identify key flows: Before we put heads down to individual screens, we came together and figured out major user flows across the app. We created user flow diagrams with little or no screen design placeholders, in order to align big picture of the app among creative team.
Wireframing: Once user flows were identified, we split works into three parts, and assigned one person to one portion of works. From there, we started to create wireframe together.
Wireframes I was responsible:
- Text Search
- Outdoor Discovery School
- Shopping Bag & Check Out
Visual Design: While UX team kept creating wireframes flow by flow, visual designers started to pick up wires and turn them into visual comps by following style guide created by Sapient.
Prototyping: After wireframe were created and approved by client, we started to create prototypes by using Pixate.
With the help of this online prototyping tool, we were able to bring most of major flows alive, and ready for user testing.
I was awarded as the Pixate Master by teammate during the project.
Protytypes I was responsible:
- Text Search
- Browsing path
- PDP > Feature image zoom in/out
- Ratings & Reviews
User Testing: After prototypes were created, we conducted two rounds of user testing on real customers in two different stores including the flagship store in Freeport, ME. I was able to run the testing together with another team member.
Last Minute Tweaks: Based on the testing result, we made some final tweaks to the design before we handed over to developers.