Stela
A Design Case Study
Project Overview
The project was to create a portal for retail store managers to leverage feedback from customers into information they could use to train their employees. Meant for a tablet kiosk station in a retail setting, we had to keep in mind how users would interact with this product (via touch) and design accordingly. This was a school project done through Flatiron's UX/UI Design program. I worked with a partner in both the competitive research and user testing phases, but the designs are entirely my own.
Domain Research
My partner and I conducted domain research and found that while the market for employee management software was heavily saturated, there wasn’t any software that focused solely on translating customer feedback into trainable data that managers could use to build growth plans for their employees.
Design Approach
I chose the name Stela because it is derived from the latin word ‘stele’ which were large sturdy stones ancient greeks used to mark boundaries. I chose this name to represent the idea of sturdiness and being trustworthy.
I decided to use variants of purple because of the education aspect of the software: purple often represents wisdom and creativity.
Moodboards
I created three different moodboards, each exploring a different aspect of the project. The first one was meant to represent sturdiness and wisdom with the images of columns and varying shades of purple.
​
For the second one, I tried to focus on the words ‘fun’ and ‘helpful. The color scheme I chose made me think about ice cream and the 1980’s, both known for exemplifying the word ‘fun’. Most managers and retail employees don’t associate work with ‘fun,’ so making the software easy and fun to look at and use was a priority for me in this design.
​
For the third moodboard I tried to focus more on the ‘education’ aspect, using colors that are reminiscent of school with the yellow number two pencil, a green chalkboard and off white text books. This design will be laid out with greater emphasis on the training sections of the software.
Style Tile
After designing and testing my three moodboards, the purple option was the clear favorite. I tried to focus on exemplifying the adjectives ‘approachable’ and ‘useful.’ Going off of layouts I had seen in competitor programs such as Calendly and Insightly.com, I used purple as an accent tab at the top and tried to keep icons in the menu subtle but obvious.
Usability Testing
After designing the style tiles, I personally conducted two user interviews from current retail managers to gauge user feedback and gut reactions to the designs.
By using the Microsoft Usability Toolkit, I attempted to gauge the user's reaction. Users reacted positively, using words like 'calm' 'inspiring' and 'familiar' to describe the purple style tile.
In designing the interface, I tried to break up the traditional layout I had seen with the menu along the top by moving it to the side of the screen. I focused on having visual representations of the information (something that was noted as a pain point in other competitor websites).
High Fidelity Designs
Usability Testing of High Fidelity Designs
Testing Goal:
The goal of this round of user testing was to ensure that the clear favorite of the first round had been designed in a way that continued to exemplify the words 'inspiring' and 'creative.' This was done by using a 'first click' test followed by a brief design survey.
Key Findings
Color palette was well received
Users appreciated the information being up front and available without being buried under several different webpages
Some users cited navigation as a pain point, stating that the labels for some of the pages were confusing.
High Fidelity Designs Round 2
After receiving user feedback I attempted to rework the layout to be more familiar to users and allow more real estate for content. I achieved this by moving the navigation bar back up to the top of the page where it has traditionally been.
​
I also did some designs for the mobile platform as well. Since the navigation seemed to be a stumbling block for some users, I tried to condense it into a hamburger menu for the mobile version, along with trying to use icons along with words.
User Testing
One final round of user testing was done with three new users to gauge if the changes made were effective and if the app navigation was easy enough to figure out the first time.
Users had trouble with tasks that asked them to find certain pieces of information. Users were asked to find the conversion score and they couldn't decide between 'Today's Numbers' and 'Store Stats' to find it.
Users also had difficulty with the scheduling function on the 'Create New Schedule' page, unsure of how it worked.
Micro Interactions
We were tasked with designing three different kinds of micro interactions: an automatic trigger, a manual trigger and a signature moment that would really identify the brand.
What I Learned
If I had more time, I would continue to work on the navigation scheme. The way I had worded things were confusing people more than I had anticipated.
The schedule creator page was not intuitive for users. They did not understand how to use that page and in the future, I would go with a more traditional method for inputting information. Sometimes unique is not always appropriate.